<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
</head>

<body>
  <h1>拦截器练习</h1>
  <input type="text" id="ipt">
  <button id="btn">提交</button>

  <script>
    const myAxios = axios.create({
      baseURL: "/", //配置公共路径
      timeout: 10000, //配置超时事件
      headers: {} //配置请求头
    })


    // // 添加请求拦截器
    // myAxios.interceptors.request.use(function (config) {
    //   // 在发送请求之前做些什么
    //   const token = "dwqjnjwowec.mxwcmiwcm.wxdewnciuwnci"
    //   config.headers.token = token

    //   ////2.让进度条开始
    //   NProgress.start();

    //   return config;
    // }, function (error) {
    //   // 对请求错误做些什么
    //   return Promise.reject(error);
    // });

    // // 添加响应拦截器
    // myAxios.interceptors.response.use(function (response) {
    //   // 对响应数据做点什么
    //   //2.让进度条结束
    //   setTimeout(()=>{
    //     NProgress.done();
    //   },3000)


    //   return response.data;
    // }, function (error) {
    //   // 对响应错误做点什么
    //   return Promise.reject(error);
    // });



    // 添加请求拦截器
    myAxios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      const token = "cmiwenciewu.cnweiuwicn.cmwjicmwij"
      config.headers.token = token

      //进度条开始
      NProgress.start();

      console.log(config);
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });

    // 添加响应拦截器
    myAxios.interceptors.response.use(function (response) {
      // 对响应数据做点什么


      //进度条结束
      setTimeout(()=>{
        NProgress.done();
      },10000)

      console.log(response);
      return response.data;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });




    const oIpt = document.getElementById('ipt')
    const oBtn = document.getElementById('btn');
    oBtn.onclick = async function () {
      const iptValue = oIpt.value;
      try {
        const result = await myAxios.get("/user", {
          params: {
            userId: iptValue
          }
        })
        console.log(result.data);
      } catch (e) {
        console.log(e, "出现错误");
      }
    }
  </script>
</body>

</html>